﻿@using Kojarskiy.Core
@using Kojarskiy.Models
@{
    var vBlocks = (Blocks)ViewData["Blocks"];
    var blocks = new List<ContentBlock>();
    int categoryId = 0;
    int siteMapId = 0;

    if(vBlocks != null)
    {
        blocks = ContentBlock.ParseLayout(vBlocks.Layout);
    }

    if (Model is Kojarskiy.Models.SiteMap)
    {
        siteMapId = Model.SiteMapId;
        categoryId = 0;
    }
}

<div class="form-group">
    <label>Блоки страницы</label>
    <div style="clear: both;"></div>
    <div class="form-group  f_r">
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Добавить блок <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a onclick="addBlock(1, 1, 'Menu')" style="cursor: pointer;">Меню</a></li>
                <li class="divider"></li>
                <li><a onclick="addBlock(1, 1, 'Text')" style="cursor: pointer;">Текстовый блок</a></li>
            </ul>
        </div> 
        <div class="btn btn-success" onclick="serializeLayout()">Сохранить разметку</div>                         
    </div>
    <div style="clear: both;"></div>
    <div class="gridster" style="border: 1px dashed gray;">
        <ul class="layout-editor">
            @{
                if (blocks.Count > 0)
                {
                    foreach (var contentBlock in blocks)
                    {
                        <li data-row="@contentBlock.Row" data-col="@contentBlock.Column" data-sizex="@contentBlock.SizeX" data-sizey="@contentBlock.SizeY" data-type="@contentBlock.Type">
                                
                            @ContentBlock.GetNameByType(contentBlock.Type)

                            @if(contentBlock.Type != "Content")
                            {
                                <span class="badge"  style="position: absolute; top: 0; right: 0;">
                                    <span onclick="removeBlock(this.parentElement.parentElement)" class="glyphicon glyphicon glyphicon-remove small"></span>
                                </span>
                            }
                        </li>  
                    }
                }
                else
                {
                    <li data-row="1" data-col="2" data-sizex="3" data-sizey="3" style="padding-top: 260px;" data-type="Content">Контент страницы</li>
                }
            }
        </ul>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $(".gridster ul").gridster({
            widget_margins: [10, 10],
            widget_base_dimensions: [175, 175],
            serialize_params: function ($w, wgd) {
                return {
                    id: $($w).attr('id'),
                    col: wgd.col,
                    row: wgd.row,
                    size_x: wgd.size_x,
                    size_y: wgd.size_y,
                    type: $($w).data('type')
                };
            }
        });
    });

    function removeBlock(el) {
        var gridster = $(".gridster ul").gridster().data('gridster');
        gridster.remove_widget(el);
    }

    function addBlock(column, row, type) {
        var gridster = $(".gridster ul").gridster().data('gridster');
        switch (type) {
            case "Text":
                return gridster.add_widget('<li class="new" data-type="Text">Текстовый блок<span class="badge" style="position: absolute; top: 0; right: 0;"><span onclick="removeBlock(this.parentElement.parentElement)" class="glyphicon glyphicon glyphicon-remove small"></span></span></li>', 1, 1, column, row);
            case "Menu":
                return gridster.add_widget('<li class="new" data-type="Menu">Блок меню<span class="badge" style="position: absolute; top: 0; right: 0;"><span onclick="removeBlock(this.parentElement.parentElement)" class="glyphicon glyphicon glyphicon-remove small"></span></span></li>', 1, 1, column, row);
            case "Popular":
                return gridster.add_widget('<li class="new" data-type="Popular">Популярные товары<span class="badge" style="position: absolute; top: 0; right: 0;"><span onclick="removeBlock(this.parentElement.parentElement)" class="glyphicon glyphicon glyphicon-remove small"></span></span></li>', 1, 1, column, row);
            case "Action":
                return gridster.add_widget('<li class="new" data-type="Action">Акции<span class="badge" style="position: absolute; top: 0; right: 0;"><span onclick="removeBlock(this.parentElement.parentElement)" class="glyphicon glyphicon glyphicon-remove small"></span></span></li>', 1, 1, column, row);
            case "Filter":
                return gridster.add_widget('<li class="new" data-type="Filter">Фильтр товаров<span class="badge" style="position: absolute; top: 0; right: 0;"><span onclick="removeBlock(this.parentElement.parentElement)" class="glyphicon glyphicon glyphicon-remove small"></span></span></li>', 1, 1, column, row);
            default:
        }
    }

    function serializeLayout() {
        var gridster = $(".gridster ul").gridster().data('gridster');
        var widgets = gridster.serialize();
        $.ajax({
            url: "/ru/SiteMap/SaveLayout",
            type: 'POST',
            data: { siteMapId: '@siteMapId', categoryId: '@categoryId', layout: widgets },
            success: function (responce) {
                alert("Изменения сохранены!");
            },
            error: function (xhr) {
                alert("Ошибка!");
            }
        });
    }
</script>